{% extends "mdm/basemdm.html" %}

{% block title %} {{ titulo }} {% endblock %}


{% block contenido %}
     <div id="contenido">
          <div id="izq">
               <div id="promociones" class="contenidos">
                    {% for promo in promos  %}
                        <div id="divpromo_{{ promo.id }}">
                              <h3 style="overflow: hidden;line-height: 2.5em">{{ promo.titulo }}<span>{{ promo.menu.nombre }}</span>
                                   <button id="btnwc_{{ promo.id }}" class="newcont" href="#" style="float: right">A&ntilde;adir contenido</button>
                              </h3>
                              <ul id="ulc_{{ promo.id }}">
                                   {% for cont in promo.contenido_set.all %}
                                   <li>
                                        <a id="promo{{ cont.id }}" href="#"><button id="borra_{{ promo.id }}" class="borracon" href="#">Borrar contenido</button>{{ cont }}</a>
                                   </li>
                                   {% endfor %}
                              </ul>
                         </div>
                    {% endfor %}
               </div>
          </div>
          <div id="der" class="sombra ui-accordion-header ui-helper-reset ui-state-active ui-corner-all">
               <h4>Título</h4>
               <input type="text" value="" name="titulo" id="titulo" class="texto" maxlength="100" />
               <span style="float: left; margin-right: 10px;">
                    <h4>Orden</h4>
                    <input type="number" value="" name="orden" id="orden" />
               </span>
               <span>
                    <h4>Fecha</h4>
                    <input type="datetime" value="" name="fecha" id="fecha" class="vDateField" />
               </span>
               <h4>Texto</h4>
               <textarea id="texto" name="texto"></textarea>
               <div class="demo ui-widget ui-helper-clearfix">
                    <div id="fotoscon" class="ui-widget-content ui-state-default">
                         <h4 class="ui-widget-header"><span>Fotos de contenido<button id="newfp" href="#" rel="FP">A&ntilde;adir foto</button></span></h4>
                         <ul id="FPul" class="gallery ui-helper-reset ui-helper-clearfix"></ul>
                    </div>
               </div>
               <button id="guardar1">Guardar</button>
          </div>                    
     </div>
     <div id="up_div">
          <div class="upload_div ui-dialog ui-widget ui-widget-content ui-corner-all" title="A&ntilde;adir fotos">
               <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-1">Añadir fotos</span></div>
               <div class="c">
                    <span class="fileinput-button">
                         <span class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" style="padding: 10px;">Seleccionar fotos...</span>
                         <input id="fileupload" type="file" accept="image/png" name="files" multiple>
                    </span>
                    <br> 
                    <div id="progress" class="progress"></div>
                    <div id="files" class="files"></div>
               </div>
               <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                    <div class="ui-dialog-buttonset"><button id="cerrarFrm" href="#">Cerrar</button></div>
               </div>
          </div>
     </div>

{% endblock  %}

{% block script %}
     <script>
     var actual = '', tabactual = 0, fotosya = false, promoya = false, dirty = false, stop = false, nuevo = false, altura = 0, elul
     
     var params = {'{{session_cookie_name}}': '{{session_key}}', '{{ csrf_token_name }}': '{{ csrf_token }}'}
     $(
          function() {

               $(document).on(
                    'click', 
                    '#promociones ul > li > a',
                    function(){
                         preCarga($(this))
                    }
               )
              
               $('#guardar1').button().click(
                    function(event, ui) { 
                         guardar()
                         event.stopImmediatePropagation()
                         event.preventDefault()
                    }
               )
               
               $('input:not([type="file"])').on('change keydown',
                    function(event, ui){
                         hayCambios()
                    }
               )
               
               $('input#titulo').on('keyup',
                    function(event, ui){
                         $('#'+actual).text($(this).val())
                    }
               )
               
               tinyMCE.init(
                    {
                    mode : 'exact',
                    elements : 'texto',
                    theme : 'advanced',
                    plugins: 'fullscreen',
                    theme_advanced_buttons1 : 'bold, italic, underline, strikethrough, separator, justifyleft,  justifycenter, justifyright,  justifyfull, separator, bullist, numlist, separator, link, unlink , separator, removeformat, separator, fullscreen',
                    theme_advanced_buttons2: '',
                    theme_advanced_buttons3: '',
                    theme_advanced_buttons4: '',
                    theme_advanced_toolbar_location : 'top',
                    theme_advanced_toolbar_align : 'left',
                    width: '100%',
                    height: '200px',
                    onchange_callback : 'hayCambios',
                    content_css : '{{ STATIC_URL }}css/custom.css'
                    }
               )

               $("#promociones").accordion(
                    {
                         header: '> div > h3',
                         icons: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-circle-triangle-e' },
                         animate: 200,
                         heightStyle: 'content',
                         beforeActivate: function(event, ui) {
                              return preCarga(ui.newHeader.parent().find('ul > li > a'))
                         },
                         activate: function(event, ui) {
                              ui.oldHeader.children('button').css('display', 'none')
                              ui.newHeader.children('button').css('display', 'block')
                         },
                         create: function(event, ui) {
                              ui.header.children('button').css('display', 'block')
                              preCarga(ui.header.parent().find('ul > li > a'))
                         }
                    }
               )
                              
               $('#newfp').button(
                    {
                         icons: {
                              primary: "ui-icon-plus"
                              },
                         text: false
                    }
               ).click(
                    function(){
                         $('#files').empty()
                         $('#progress').progressbar('value', 0);
                         $('#up_div').fadeIn()
                    }
               )
               
               $('button.newcont').button(
                    {
                         icons: {
                              primary: "ui-icon-plus"
                              },
                         text: false
                    }
               ).click(
                    function(){
                         nwContenido(this.id)
                    }
               )
               
               $('button.borracon').button(
                    {
                         icons: {
                              primary: 'ui-icon-minus'   
                         },
                         text: false
                    }
               ).click(
                    function(){
                         borraContenido(this.id)
                    }
               )
               
               $(document).on(
                    'click', 'ul.gallery > li > a',
                    function( event ) {
                         var $item = $( this ),
                              $target = $( event.target )

                         if ( $target.is( 'a.ui-icon-trash' ) ) {
                              deleteImage( $target )
                         } else if ( $target.is( 'a.ui-icon-zoomin' ) ) {
                              viewLargerImage( $target )
                         }
                         return false
                    }
               )
             
               $('#FPul').sortable(
                    {
                         tolerance: 'pointer',
                         update: 
                              function(event, ui) {
                                   reordenar(ui.item)
                              }
                    }
               )
               
               $('#FPul').disableSelection()
               
               $('#progress').progressbar();
              
               $('#fileupload').fileupload(
                    {
                         url: '{% url "mdm.views.subidapag" %}',
                         dataType: 'json',
                         singleFileUploads: false,
                         done: function (e, data) {
                              $.each(data.files, function (index, file) {
                                   $('<p/>').text('Imagen '+file.name+' añadida correctamente.').appendTo('#files')
                              })
                         },
                         progressall: function (e, data) {
                              $('#progress').progressbar('value', parseInt(data.loaded / data.total * 100, 10));
                         },
                         fail: function(e, data) {
                              $('<p/>').text(data.errorThrown).appendTo('#files')
                              $('<p/>').text(data.textStatus).appendTo('#files')
                         },
                         submit: function (e, data) {
                              var goUpload = true
                              for(var i=0; i<data.files.length; i++){
                                   if (!(/(\.|\/)(gif|jpe?g|png)$/i).test(data.files[i].name)) {
                                        $('<p/>').text(data.files[i].name + ': no válido. Sólo jpg o png').appendTo('#files')
                                        goUpload = false
                                   }   
                              }
                              if(goUpload) {
                                   data.formData = {'pag_id' : actual.replace('promo','')}
                              } else {
                                   return false
                              }
                         },
                         add: function (e, data) {
                              data.context = $('<p/>').text('Subiendo...').appendTo('#files');
                              data.submit();
                         },
                         acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                         disableImageResize: true,
                         maxFileSize: 5000000,
                    }
               )
               
               $('#cerrarFrm').button().click(
                    function() {
                         cargaFotos(actual)
                         $('#files').empty()
                         $('#up_div').fadeOut()
                    }
               )
               
               $(document).ajaxStop($.unblockUI)
          }
     )
     
     function cargaPromo(id){
          espera()
          $.post(
               '{% url "datospag" %}' + '/' + id.replace('promo', ''), 
               '',
               function(data){
                   rellenar(data)
               },
               'json'
          )
          if (actual) $('#' + actual).removeClass('selected')
          $('#' + id).addClass('selected')
          actual = id
          dirty = false
          if ($('#guardar1').is(':visible')) $('#guardar1').fadeOut()
          setTimeout('cargaFotos()', 500)
     }
          
     function cargaFotos(){
          $.post(
               '{% url "fotoscont" %}' + '/' + actual.replace('promo', ''), 
               '',
               function(data){
                   fotos(data)
               },
               'json'
          )
     }
     
     function rellenar(dat) {
          var ds = tinyMCE.get('texto')
          if (ds) {
               ds.setContent(dat.texto)
          } 
          else {
               $('#texto').val(dat.texto)
          }
          $('#titulo').val(dat.titulo)
          $('#fecha').val(dat.fecha)
          $('#orden').val(dat.orden)
     }
     
     function fotos(datos) {
          $('#FPul').empty()
          var dat = sortObject(datos)
          for (x in dat) {
               cur = dat[x]
               im =  '<li class="bordea ui-widget-content ui-corner-tr" id="img_' + cur.tipo + '_' + cur.id + '"><h5 class="ui-widget-header titulofoto"></h5><div class="imgcont"><img alt="' + cur.ds + '" src="'
               if (cur.thumb != '') {
                    im += cur.thumb
               } else {
                    im += cur.foto
               }
               im += '" width="100"/></div><a href="' + cur.foto + '" title="Ampliar" class="ui-icon ui-icon-zoomin">Ampliar</a>'
               im += '<span>' + cur.size[0] + 'x' + cur.size[1] + '</span><a href="#" title="Borrar" class="ui-icon ui-icon-trash" rel="' + cur.id + '">Borrar</a></li>'
               $('#FPul').append(im)               
          }
     }
     
     function hayCambios($target){
          dirty = true
          if (!$('#guardar1').is(':visible')) $('#guardar1').fadeIn()
     }
     
     function nwContenido(boton) {
          $('#'+boton).button('option', 'disabled', true)
          hayCambios()
          nuevo=true
          $('input, textarea').val('')
          tinyMCE.get('texto').setContent('')
          $('#FPul').empty()
          var b = boton.split('_')
          var ul = $('#ulc_' + b[1])
          elul = ul
          altura = ul.height()
          ul.height(altura + ul.children('li').first().height() + 15)
          ul.append('<li id="elnuevo"><a id="promoNueva" href="#" class="selected">Nuevo contenido</a></li>')
          if (actual) $('#' + actual).removeClass('selected')
          actual = 'promoNueva'
          $('#newfp').button('option', 'disabled', true)
     }
     
     function guardar() {          
          var fr = {}
          fr['texto'] = tinyMCE.get('texto').getContent()
          if(fr['texto'] == '') {
               alert('Falta el texto')
               tinyMCE.get('texto').focus()
               return
          }
          if($('#fecha').val()!= '') {
               if(moment($('#fecha').val(), ['DD/MM/YY','DD/MM/YYYY','DD/MM/YY HH:mm','DD/MM/YYYY HH:mm']).isValid()) {
                    fr['fecha'] = moment($('#fecha').val(), ['DD/MM/YY','DD/MM/YYYY','DD/MM/YY HH:mm','DD/MM/YYYY HH:mm']).format('YYYY-MM-DD HH:mm');
               } else {
                    alert('Fecha no válida.')
                    $('#fecha').focus()
                    return
               }
          } else {
               fr['fecha'] = null
          }
          var orden = parseInt($('#orden').val())
          if(isNaN(orden)){
              alert('Número de orden no válido.')
              $('#orden').focus() 
              return 
          }
          else {
               fr['orden'] = orden
          }
          fr['titulo'] = $('#titulo').val()
          var prms = {'pagina': params['pag_id'], 'campos': JSON.stringify(fr) }
          if(nuevo) {
               prms['nuevo'] = true
          } else {
               prms['promo_id'] = actual.replace('promo', '')
          }
          $.post(
               '{% url "actualizapag" %}', 
               prms,
               function(ret) {
                    $('.newcont').button('option', 'disabled', false)
                    if(nuevo) {
                         $('#newfp').button('option', 'disabled', false)
                         nuevo = false
                         $('#promoNueva').attr('id', 'promo' + ret.id).text(ret.ds)
                         actual = 'promo' + ret.id
                    }
                    $('#guardar1').fadeOut()
                    dirty = false          
               }
          )             
     }
       
     function espera() {
          $.blockUI({message: '<h3><img src="{{ STATIC_URL }}img/superbgloading.gif" style="vertical-align: middle; margin: 5px">Espere, por favor...</h3>'})
     }
     
     // image preview function, demonstrating the ui.dialog used as a modal window
     function viewLargerImage( $link ) {
          var src = $link.attr( 'href' ),
          title = $link.siblings( 'img' ).attr( 'alt' ),
          $modal = $( 'img.chopo[src$="' + src + '"]' )
          if ( $modal.length) {
               $modal.dialog( 'open' )
          } else {
               var img = $( '<img class="chopo" alt="' + title + '" style="display: none padding: 8px" />' )
                    .attr( 'src', src ).appendTo( 'body' )
               var ancho = parseInt($link.siblings('span').text().split('x')[0]) + 35
               setTimeout(function() {
                    img.dialog({
                         title: title,
                         modal: true,
                         minWidth: ancho,
                         positon: 'top',               
                         resizable: false
                    })
               }, 100 )
          }
     }

     function deleteImage($cual) {
          if (confirm('¿Borrar la imagen?')) {
               $.post(
                    '{% url "borrafotopag" %}', 
                    {'media_id':  $cual.attr('rel')}, function() {
                         cargaFotos(actual)
                    }
               )
          }         
     }
     
     function reordenar() {
          espera()
          var arr = $('#FPul').sortable('toArray')
          var n = 0
          for (x in arr) {
              $.post(
                    '{% url "ordenafotopag" %}', 
                    {'media_id': arr[x].split('_')[2], 'orden': n}
               )
               n++               
          }
     }
     
     function sortObject(o) {
         var sorted = {},
         key, a = [];

         for (key in o) {
             if (o.hasOwnProperty(key)) {
                     a.push(key);
             }
         }

         a.sort();

         for (key = 0; key < a.length; key++) {
             sorted[a[key]] = o[a[key]];
         }
         return sorted;
     }

     function preCarga(o) {
          var adelante = true
          if (dirty) adelante = confirm('Hay cambios sin guardar. ¿Continuar?')
          if (adelante) {
               if(nuevo) {
                    $('#elnuevo').remove()
                    elul.height(altura)
                    $('.newcont, #newfp').button('option', 'disabled', false)
                    nuevo=false
               }
               params['pag_id'] = $(o).parents('ul').attr('id').replace('ulc_', '')
               cargaPromo($(o).attr('id'))
          } else {
               return false
          }
     }

     </script>
{% endblock  %}
